/*
  在你书写 构造函数 和 原型内容 的时候
    + 脑海中需要始终想象着未来实例的样子
    + 只要你书写了 this.xxx = yyy
      => 就是在向实例身上添加一个 xxx 成员, 值是 yyy
    + 只要你访问了 this.xxx
      => 就是在访问 实例对象 身上的 xxx
*/



// 是否需要参数
//   至少需要一个参数, 你出现选项卡的范围元素
function Tabs(select, type = 'click') {
  // 第一个属性, 选项卡的范围元素
  this.ele = document.querySelector(select)

  // 1. 获取实现选项卡需要用到的属性
  // btns 和 boxs
  // 是整个页面范围内的吗 ? 就是和这个 this.ele 元素下的 ul 下的 li
  this.btns = this.ele.querySelectorAll('ul > li')
  this.boxs = this.ele.querySelectorAll('ol > li')

  this.type = type

  // 这个位置的 this 是谁 ?
  // 当前实例
  this.init()
}

// 2. 需要一个方法
// 作用: 给 实例对象 身上的 btns 内的每一个 li 绑定点击事件
// 既然是方法, 最好书写在 prototype 上
Tabs.prototype.init = function () {
  // 2-1. 循环遍历 this.btns
  this.btns.forEach((item, index) => {
    item.addEventListener(this.type, () => {
      // 2-2. 给 this.btns 和 this.boxs 内的每一个 li 取消类名
      for (let i = 0; i < this.btns.length; i++) {
        this.btns[i].className = ''
        this.boxs[i].className = ''
      }

      // 2-3. 给 index 对应的添加类名
      this.btns[index].className = ' active'
      this.boxs[index].className = 'container active'
    })
  })
}
